<template>
	<view class="content" :class="current==2 || current ==3?'page2':'page1'">
		<!-- #ifndef MP-WEIXIN -->
		<canvas canvas-id="canvas" id="canvas" style="width:620px; height:880px;" class="canvas-hide" />
		<!-- #endif -->
		<view class="title" :style="{'margin-top':biaotimargin+'rpx'}"></view>
		<!-- <view class="xiaologo1 animated fadeIn" v-if="current==2 || current == 3?true:false"></view> -->
		<swiper :indicator-dots="false" :autoplay="false" :duration="400" class="swhigh" :current="current"
			:vertical="true" @animationfinish="anifinish" :disable-touch="distouch">
			<swiper-item>
				<view class="swiper-item">
					<view class="shourongqi animated opcity" :class="current==0?'fadeInDown':''">
						<view class="loading">
							<view class="box" :style="'top:'+(100-baifenbi)+'%'">
								<view class="box1">
									<image src="../../static/xin-caise.png" mode="widthFix" class="pic caise"
										:style="'top:-'+(100-baifenbi)+'%'"></image>
								</view>

							</view>
						</view>
					</view>

					<view class="zhiwen animated " @click="dianji" :class="current==0?'fadeIn':''"></view>
					<view v-if="language=='zh'">
						<view class="tishi animated opcity" v-if="isShow" :class="current==0?'fadeInUp':''">
							请按指纹点亮心灵之旅
							<view class="xiaotishi">
								随着越来越多J&J员工点亮心灵之旅，<br>爱心会最终充满色彩，记得分享给更多员工哟♥
							</view>
						</view>

						<view class="tishi animated fadeInUp" v-else>
							您是第<text style="color: #e01828;">{{people}}</text>位点亮心灵之旅的强生员工
						</view>
					</view>
					<view v-else>
						<view class="tishi1 animated opcity" v-if="isShow" :class="current==0?'fadeInUp':''">
							Please press your fingerprint to light up your<br>“Mindfulness Journey”
							<view class="xiaotishi">
								As more and more J&Jers light up their "Mindfulness Journey",<br>the heart will eventually be full of color. <br>Don't forget to share with your coworkers♥
							</view>
						</view>
						<view class="tishi1 animated fadeInUp" v-else>
							You are the<text style="color: #e01828;">{{people}}</text>J&J employee to light up
							the<br>“Mindfulness Journey”
						</view>
					</view>

					<view class="xiahua" v-if="!distouch">
						<text class="iconfont">&#xe770;</text>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<video id="myVideo" object-fit="fill" :src="videoSrc" controls class="vvsize opcity animated "
						:class="current==1?'fadeInUp':''"></video>
					<view class="shou1 animated opcity" :class="current==1?'fadeInUp':''">

					</view>
					<view class="xiahua" v-if="!distouch">
						<text class="iconfont">&#xe770;</text>
					</view>
				</view>

			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<!-- <image src="../../static/huodongshuoming.png" mode="widthFix" class="huodongshuoming"></image> -->
					<text class="xiaobiaoti animated opcity"
						:class="current==2?'fadeInUp':''">{{language=='zh'?'2021 ADA全年系列活动':'2021 ADA China Roadmap'}}</text>
					<view class="liuchengtu animated opcity" :class="current==2?'fadeInUp':''">
						<image src="../../static/5yue.png" mode="widthFix" class="yue5 animated "
							:class="current==2?'fadeInRight':''" v-if="language=='zh'"></image>
						<image src="../../static/5yue-en.png" mode="widthFix" class="yue5-en animated "
							:class="current==2?'fadeInRight':''" v-else></image>
						<image src="../../static/txt01.png" mode="widthFix" class="txt01 animated "
							:class="current==2?'fadeInLeft':''" v-if="language=='zh'"></image>
						<image src="../../static/txt01-en.png" mode="widthFix" class="txt01-en animated "
							:class="current==2?'fadeInLeft':''" v-else></image>

						<!-- <image src="../../static/7yue.png" mode="widthFix" class="yue7 animated "
							:class="current==2?'fadeInLeft':''" v-if="language=='zh'"></image>
						<image src="../../static/7yue-en.png" mode="widthFix" class="yue7-en animated "
							:class="current==2?'fadeInLeft':''" v-else></image>
						<image src="../../static/txt02.png" mode="widthFix" class="txt02 animated "
							:class="current==2?'fadeInRight':''" v-if="language=='zh'"></image>
						<image src="../../static/txt02-en.png" mode="widthFix" class="txt02-en animated "
							:class="current==2?'fadeInRight':''" v-else></image>
 -->
						<image src="../../static/10yue.png" mode="widthFix" class="yue10 animated "
							:class="current==2?'fadeInLeft':''" v-if="language=='zh'"></image>
						<image src="../../static/10yue-en.png" mode="widthFix" class="yue10-en animated "
							:class="current==2?'fadeInLeft':''" v-else></image>
						<image src="../../static/txt03.png" mode="widthFix" class="txt03 animated "
							:class="current==2?'fadeInRight':''" v-if="language=='zh'"></image>
						<image src="../../static/txt03-en.png" mode="widthFix" class="txt03-en animated "
							:class="current==2?'fadeInRight':''" v-else></image>

						<image src="../../static/12yue.png" mode="widthFix" class="yue12 animated "
							:class="current==2?'fadeInRight':''" v-if="language=='zh'"></image>
						<image src="../../static/12yue-en.png" mode="widthFix" class="yue12-en animated "
							:class="current==2?'fadeInRight':''" v-else></image>
						<image src="../../static/txt02.png" mode="widthFix" class="txt04 animated "
							:class="current==2?'fadeInLeft':''" v-if="language=='zh'"></image>
						<image src="../../static/txt02-en.png" mode="widthFix" class="txt04-en animated "
							:class="current==2?'fadeInLeft':''" v-else></image>
					</view>
					<view class="xiahua" v-if="!distouch">
						<text class="iconfont">&#xe770;</text>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">

					<view class="btn1 animated opcity" :class="current==3?'fadeInUp':''" @click="getHaibao"
						v-if="language=='zh'"></view>
					<view class="btn1-en animated opcity" :class="current==3?'fadeInUp':''" @click="getHaibao" v-else>
					</view>
					<view class="btn2 animated opcity" :class="current==3?'fadeInUp':''" @click="joinUs"
						v-if="language=='zh'"></view>
					<view class="btn2-en animated opcity" :class="current==3?'fadeInUp':''" @click="joinUs" v-else>
					</view>
					<!-- <view class="xiaologo animated opcity" :class="current==3?'fadeInUp':''"></view> -->
				</view>
			</swiper-item>
		</swiper>


		<!-- 海报 -->
		<view class="haibao-box" v-if="haibaoshow">
			<view class="haibao" id="piaopiao">
				<image :src="'../../static/qian'+suijishu+'.png'" mode="widthFix" class="pic" v-if="language=='zh'">
				</image>
				<image :src="'../../static/qian'+suijishu+'-en.png'" mode="widthFix" class="pic" v-else></image>
				<view class="mingci" v-if="language=='zh'">您是第<text
						style="color: #df0113;">{{people}}</text></text>位点亮心灵之旅的强生员工</view>
				<view class="mingci-en" v-else>you are the <text style="color: #df0113;"> {{people}} </text></text> J&J
					employee to light up the<br>"Mindfulness Journey"</view>
				<text class="nicheng">{{nickname}}</text>
			</view>
			<text class="xiazaitishi" v-if="language=='zh'">长按图片保存并分享您的心灵签</text>
			<text class="xiazaitishi" v-else>Long Press the picture to save<br>and share your lucky draw</text>
			<view style="margin-top: 40rpx;" @click="closeHaibao">
				<text class="iconfont1">&#xe606;</text>
			</view>
		</view>

		<!-- 可以下载的海报 -->
		<image :src="piaoSrc" mode="widthFix" class="pic dingwei" v-if="haibaoshow"></image>
	</view>
</template>

<script>
	import DrawPoster from '../../js_sdk/u-draw-poster/draw-poster.js'
	// import html2canvas from 'html2canvas';
	export default {
		components: {
			// DrawPoster
		},
		data() {
			return {
				now: 0,
				all: 10,
				people: 0,
				isShow: true,
				current: 0,
				distouch: true,
				suijishu: 1,
				nickname: '',
				haibaoshow: false,
				piaoSrc: '',
				xiaologoshow: false,
				language: '',
				videoSrc: ''
			}
		},
		onShow() {
			this.language = uni.getStorageSync('duoyuyan')
			console.log('当前页面语言类型：', this.language)
			this.getVideo()
			this.getAllNumber()
		},
		onLoad(e) {
			if (e.current == 3) {
				this.current = 3
				this.distouch = false
				//从提交表单成功后返回这个页面 重新获取下数据
				this.dianji1()
			}
		},
		onReady(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		computed: {
			baifenbi() {
				if ((this.now / this.all) * 100 >= 100) {
					return 100
				} else {
					return (this.now / this.all) * 100
				}

			},
			biaotimargin() {
				if (this.current == 0) {
					// this.videoContext.pause()
					return 196
				} else if (this.current == 1) {
					this.videoContext.play()
					return 196
				} else if (this.current == 2) {
					this.videoContext.pause()
				} else if (this.current == 3) {

					return 196
				} else {
					return 196
				}
			}
		},
		methods: {
			getVideo() {
				uniCloud.callFunction({
					name: 'getvideo'
				}).then((res) => {
					this.videoSrc = res.result.data[0].videosrc
				})
			},
			getAllNumber() {
				uniCloud.callFunction({
					name: 'getAllNum',
					data: {
						sign: 1
					}
				}).then((res) => {
					console.log(res.result.data)
					this.now = res.result.data[0].num
					this.all = res.result.data[1].num
					console.log(this.now / this.all)
				})
			},
			dianji() {
				let that = this



				uni.showLoading({
					title: 'loading···',
					mask: true
				})
				let openid = uni.getStorageSync('openID')
				if (openid) {
					uniCloud.callFunction({
						name: 'getAllNum',
						data: {
							sign: 2,
							openid: openid
						}
					}).then((res) => {
						console.log(res)
						// debugger
						uni.hideLoading()
						that.distouch = false
						if (res.result.success) {
							that.people = res.result.num
							that.isShow = false
							that.nickname = res.result.nickname
							that.suijishu = res.result.suijishu
							uni.showToast({
								icon: 'none',
								title: res.result.msg
							})
						} else {
							that.people = res.result.num
							that.isShow = false
							that.nickname = res.result.nickname
							that.suijishu = res.result.suijishu
							uni.showToast({
								icon: 'none',
								title: res.result.msg
							})
						}
					})
				} else {
					uni.hideLoading()
					uni.showModal({
						content: '登录已过期，请重试',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.redirectTo({
									url: '../login/login'
								})
							}
						}
					})
				}


			},
			dianji1() {
				let that = this


				uni.showLoading({
					title: 'loading···',
					mask: true
				})
				let openid = uni.getStorageSync('openID')

				uniCloud.callFunction({
					name: 'getAllNum',
					data: {
						sign: 2,
						openid: openid
					}
				}).then((res) => {
					uni.hideLoading()
					if (res.result.success) {
						that.people = res.result.num
						that.isShow = false
						that.nickname = res.result.nickname
						that.suijishu = res.result.suijishu

					} else {
						that.people = res.result.num
						that.isShow = false
						that.nickname = res.result.nickname
						that.suijishu = res.result.suijishu

					}
				})




			},
			anifinish(e) {
				console.log(e.detail)
				this.current = e.detail.current
				console.log(this.current)
			},
			getHaibao() {
				this.haibaoshow = true

				//渲染入场券
				/* setTimeout(() => {
					

					let that = this
					var copyDom = document.querySelector('#piaopiao');
					var width = copyDom.offsetWidth; //dom宽
					var height = copyDom.offsetHeight; //dom高
					var scale = 2; //放大倍数
					html2canvas(document.querySelector('#piaopiao'), {
						dpi: window.devicePixelRatio * 1,
						scale: scale,
						width: width,
						heigth: height,
					}).then(canvas => {
						const context = canvas.getContext('2d');
						// 【重要】关闭抗锯齿
						context.mozImageSmoothingEnabled = false;
						context.webkitImageSmoothingEnabled = false;
						context.msImageSmoothingEnabled = false;
						context.imageSmoothingEnabled = false;
						var url = canvas.toDataURL("image/png", 1.0);
				
						that.piaoSrc = url;
					});
				}, 2000) */

				this.huizhi()



			},
			async huizhi() {
				const dp = await DrawPoster.build("canvas")
				dp.canvas.width = 620
				dp.canvas.height = 880
				if (this.language == 'zh') {
					dp.draw(async (ctx) => {
						const url = "/static/qian" + this.suijishu + ".png"
						await ctx.drawImage(url, 0, 0, 620, 880);
						ctx.textBaseline = "top";
						ctx.textAlign = "start";
						ctx.fillStyle = "#18276c";
						ctx.font = `${38}px '微软雅黑'`;
						ctx.rotate((Math.PI / 180) * -8);
						await ctx.fillText(this.nickname, 150, 234);
					})
					dp.draw(async (ctx1) => {

						ctx1.textBaseline = "top";
						ctx1.textAlign = "center";
						ctx1.fillStyle = "#18276c";
						ctx1.font = `${32}px '微软雅黑'`;
						ctx1.rotate((Math.PI / 180) * 0);
						await ctx1.fillText(`您是第${this.people}位点亮心灵之旅的强生员工`, dp.canvas.width / 2, 706);
					})
					
					const result = await dp.awaitCreate();
					// console.log("draw绘制状况:", result);
					let posterImgUrl = await dp.createImagePath();
					// console.log("绘制生成本地地址:", posterImgUrl);
					this.piaoSrc = posterImgUrl
				} else { //英文版的生成渲染
					dp.draw(async (ctx) => {
						const url = "/static/qian" + this.suijishu + "-en.png"
						await ctx.drawImage(url, 0, 0, 620, 880);
						ctx.textBaseline = "top";
						ctx.textAlign = "start";
						ctx.fillStyle = "#18276c";
						ctx.font = `${38}px '微软雅黑'`;
						ctx.rotate((Math.PI / 180) * -8);
						await ctx.fillText(this.nickname, 150, 234);
					})
					dp.draw(async (ctx1) => {

						ctx1.textBaseline = "top";
						ctx1.textAlign = "center";
						ctx1.fillStyle = "#18276c";
						ctx1.font = `${24}px '微软雅黑'`;
						ctx1.rotate((Math.PI / 180) * 0);
						await ctx1.fillText(`you are the ${this.people} J&J employee to light up the`, dp
							.canvas.width / 2, 706);
					})
					dp.draw(async (ctx2) => {

						ctx2.textBaseline = "top";
						ctx2.textAlign = "center";
						ctx2.fillStyle = "#18276c";
						ctx2.font = `${24}px '微软雅黑'`;
						ctx2.rotate((Math.PI / 180) * 0);
						await ctx2.fillText(`"Mindfulness Journey"`, dp.canvas.width / 2, 746);
					})
					const result = await dp.awaitCreate();
					// console.log("draw绘制状况:", result);
					let posterImgUrl = await dp.createImagePath();
					// console.log("绘制生成本地地址:", posterImgUrl);
					this.piaoSrc = posterImgUrl
				}

			},
			closeHaibao() {
				this.haibaoshow = false
			},
			joinUs() {
				uni.navigateTo({
					url: '../joinus/joinus'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		/* background: url(../../static/bg.png) no-repeat center top;
	background-size: 100% auto; */
	}

	.box {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		/* top: 30%; */
		bottom: 0;
		right: 0;
	}

	.box1 {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: 25%;
		animation: zhuanquan 1s infinite;
	}

	.loading {
		width: 356rpx;
		height: 288rpx;
		overflow: hidden;
		position: relative;
		background: url(../../static/xin.png) no-repeat center center;
		background-size: 100% 100%;
		margin-top: 72rpx;
		margin-left: 40rpx;
	}

	@keyframes zhuanquan {
		0% {
			transform: translate(0%, 0);
		}

		50% {
			transform: translate(0%, -1%);
		}

		100% {
			transform: translate(0%, 0%);
		}
	}

	.caise {
		position: absolute;
		/* top: -30%; */
	}

	.zhiwen {
		width: 150rpx;
		height: 152rpx;
		background: url(../../static/zhiwen.png) no-repeat center center;
		background-size: 100% 100%;
		margin-top: 0rpx;
		animation: dx 1s infinite;
		animation-timing-function: ease-out;
	}

	@keyframes dx {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(0.85);
		}

		100% {
			transform: scale(1);
		}
	}

	.tishi {
		text-align: center;
		font-size: 36rpx;
		color: #17276c;
		font-weight: bold;
		letter-spacing: 2px;
		margin-top: 40rpx;
		// font-family: 'zhenhao';
		line-height: 70rpx;

		text {
			font-size: 56rpx;
			line-height: 70rpx;
		}
	}

	.tishi1 {
		text-align: center;
		font-size: 28rpx;
		color: #17276c;
		// font-weight: bold;
		// letter-spacing: 1px;
		margin-top: 40rpx;
		// font-family: 'zhenhao';
		line-height: 46rpx;

		text {
			font-size: 56rpx;
			line-height: 70rpx;
		}
	}

	.swhigh {
		width: 100%;
		height: 1000rpx;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
		height: 100%;
	}

	.opcity {
		opacity: 0;
	}

	.vvsize {
		width: 640rpx !important;
		height: 368rpx !important;
		margin-top: 52rpx;
	}

	.xiahua {
		animation: xiajian 1s infinite;
		margin-top: 50rpx;
	}

	@keyframes xiajian {
		0% {
			transform: translateY(-20%);
			opacity: 0;
		}

		50% {
			transform: translateY(0%);
			opacity: 1;
		}

		100% {
			transform: translateY(20%);
			opacity: 0;
		}
	}

	.shou1 {
		width: 750rpx;
		height: 467rpx;
		background: url(../../static/daxin.png) no-repeat center center;
		background-size: 100% 100%;
		margin-top: 51rpx;
		animation-delay: 0.3s;
	}

	.xiaobiaoti {
		color: #df0113;
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 36rpx;
		margin-bottom: 38rpx;
	}

	.liuchengtu {
		width: 542rpx;
		height: 568rpx;
		background: url(../../static/quxian.png) no-repeat center center;
		background-size: 100% 100%;
		animation-delay: 0.3s;
		position: relative;
	}

	.btn1 {
		width: 526rpx;
		height: 196rpx;
		background: url(../../static/btn1.png) no-repeat center center;
		background-size: 100% 100%;
		margin-top: 85rpx;
	}

	.btn1-en {
		width: 526rpx;
		height: 195rpx;
		background: url(../../static/btn1-en.png) no-repeat center center;
		background-size: 100% 100%;
		margin-top: 85rpx;
	}

	.btn2 {
		width: 526rpx;
		height: 196rpx;
		background: url(../../static/btn2.png) no-repeat center center;
		background-size: 100% 100%;
		animation-delay: 0.3s;
	}

	.btn2-en {
		width: 526rpx;
		height: 195rpx;
		background: url(../../static/btn2-en.png) no-repeat center center;
		background-size: 100% 100%;
		animation-delay: 0.3s;
	}

	.xiaologo {
		width: 750rpx;
		height: 335rpx;
		background: url(../../static/xiaoxin.png) no-repeat center center;
		background-size: 100% 100%;
		animation-delay: 0.6s;
	}

	.xiaologo1 {
		width: 750rpx;
		height: 335rpx;
		position: absolute;
		left: 50%;
		margin-left: -375rpx;
		bottom: 0;
		background: url(../../static/xiaoxin.png) no-repeat center center;
		background-size: 100% 100%;
		animation-delay: 0.6s;
	}

	.haibao-box {
		background: rgba(0, 0, 0, .6);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	.haibao {
		width: 620rpx;
		height: 880rpx;
		overflow: hidden;
		border-radius: 30rpx;
		position: relative;

	}

	.mingci {
		position: absolute;
		width: 100%;
		bottom: 140rpx;
		left: 0;
		text-align: center;
		font-size: 30rpx;
		color: #17276c;
		// font-weight: bold;
		letter-spacing: 1px;
		// margin-top: 40rpx;
		// font-family: 'zhenhao';
		line-height: 40rpx;

		text {
			font-size: 40rpx;
			line-height: 40rpx;
		}
	}

	.mingci-en {
		position: absolute;
		width: 100%;
		bottom: 120rpx;
		left: 0;
		text-align: center;
		font-size: 24rpx;
		color: #17276c;
		line-height: 36rpx;

		text {
			font-size: 26rpx;
			line-height: 36rpx;
			font-weight: bold;
			padding: 0 6rpx;
		}
	}

	.nicheng {
		position: absolute;
		top: 206rpx;
		left: 172rpx;
		font-size: 32rpx;
		color: #18276c;
		// font-family: 'zhenhao';
		line-height: 32rpx;
		transform: rotate(-8deg);
	}

	.dingwei {
		position: absolute;
		top: 80rpx;
		left: 0;
		height: 200%;
		z-index: 11;
		display: block;
		opacity: 0;
	}

	.shourongqi {
		width: 472rpx;
		height: 482rpx;
		background: url(../../static/shou1.png) no-repeat center center;
		background-size: 100% 100%;
		margin-top: 114rpx;
		position: relative;
	}

	.shourongqi::after {
		content: '';
		width: 750rpx;
		height: 468rpx;
		background: url(../../static/xiantiao.png) no-repeat center center;
		background-size: 100% 100%;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -375rpx;
		z-index: -1;
		animation: huodongyixia 10s infinite;
	}

	@keyframes huodongyixia {
		0% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(10%);
		}

		100% {
			transform: translateY(0);
		}
	}

	/* page{
		background: url(../../static/bg1.png) no-repeat center top;
		background-size: 100% auto;
	} */
	.huodongshuoming {
		width: 314rpx;
		height: 34rpx;
		margin-top: 32rpx;
	}

	.yue5 {
		width: 96rpx;
		height: 104rpx;
		position: absolute;
		top: 48rpx;
		right: -28rpx;
		animation-delay: 1s;
	}

	.yue5-en {
		width: 96rpx;
		height: 104rpx;
		position: absolute;
		top: 48rpx;
		right: -28rpx;
		animation-delay: 1s;
	}

	.txt01 {
		width: 470rpx;
		height: 48rpx;
		position: absolute;
		top: 78rpx;
		left: -10rpx;
		animation-delay: 2s;
	}

	.txt01-en {
		width: 496rpx;
		height: 56rpx;
		position: absolute;
		top: 68rpx;
		left: -30rpx;
		animation-delay: 2s;
	}

	.yue7 {
		width: 86rpx;
		height: 94rpx;
		position: absolute;
		top: 190rpx;
		left: -34rpx;
		animation-delay: 3s;
	}

	.yue7-en {
		width: 102rpx;
		height: 110rpx;
		position: absolute;
		top: 180rpx;
		left: -34rpx;
		animation-delay: 3s;
	}

	.txt02 {
		width: 440rpx;
		height: 50rpx;
		position: absolute;
		top: 208rpx;
		right: 0rpx;
		animation-delay: 3s;
	}

	.txt02-en {
		width: 478rpx;
		height: 52rpx;
		position: absolute;
		top: 208rpx;
		right: -24rpx;
		animation-delay: 3s;
	}

	.yue10 {
		width: 86rpx;
		height: 94rpx;
		position: absolute;
		top: 236rpx;
		left: -34rpx;
		animation-delay: 3s;
	}

	.yue10-en {
		width: 102rpx;
		height: 110rpx;
		position: absolute;
		top: 236rpx;
		left: -34rpx;
		animation-delay: 3s;
	}

	.txt03 {
		width: 474rpx;
		height: 52rpx;
		position: absolute;
		top: 254rpx;
		left: 68rpx;
		animation-delay: 4s;
	}

	.txt03-en {
		width: 408rpx;
		height: 54rpx;
		position: absolute;
		top: 258rpx;
		left: 88rpx;
		animation-delay: 4s;
	}

	.yue12 {
		width: 86rpx;
		height: 94rpx;
		position: absolute;
		top: 418rpx;
		right: -26rpx;
		animation-delay: 5s;
	}

	.yue12-en {
		width: 102rpx;
		height: 110rpx;
		position: absolute;
		top: 418rpx;
		right: -26rpx;
		animation-delay: 5s;
	}

	.txt04 {
		width: 474rpx;
		height: 56rpx;
		position: absolute;
		top: 440rpx;
		right: 84rpx;
		animation-delay: 6s;
	}

	.txt04-en {
		width: 448rpx;
		height: 58rpx;
		position: absolute;
		top: 446rpx;
		right: 94rpx;
		animation-delay: 6s;
	}

	.canvas-hide {
		/* 1 */
		position: fixed;
		right: 100vw;
		bottom: 100vh;
		/* 2 */
		z-index: -9999;
		/* 3 */
		opacity: 0;
	}

	.xiazaitishi {
		font-size: 26rpx;
		color: #fff;
		letter-spacing: 1px;
		margin-top: 10rpx;
		text-align: center;
	}
	.xiaotishi{
		color: #CD0815;
		font-size: 20rpx;
		text-align: center;
		line-height: 32rpx;
		font-weight: 400;
	}
</style>
